<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入商品名称" maxlength="35" disabled/>
          </el-form-item>
          <el-form-item label="缩略图" prop="thumbnail">
            <div class="upload">
              <div class="upload_warp_img" v-show="thumbnailList.length!=0">
                <div class="upload_warp_img_div" v-for="(item,index) in thumbnailList"
                     :key="index"
                >
                  <img :src="item">
                </div>
              </div>
            </div>

          </el-form-item>
          <el-form-item label="商品图片" prop="banners">
            <div class="upload">
              <div class="upload_warp_img" v-show="imgList.length!=0">
                <div class="upload_warp_img_div" v-for="(item,index) in imgList"
                     v-dragging="{ item: item, list: imgList, group: 'color' }"
                     :key="index">
                  <img :src="item">
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="商品描述" prop="description">
            <el-input v-model="form.description" type="textarea" placeholder="请输入商品描述" disabled maxlength="50"/>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="form.price" placeholder="请输入商品价格"  disabled/>
          </el-form-item>
          <el-form-item label="成本价格" prop="cost">
            <el-input v-model="form.cost" placeholder="请输入成本价格"  disabled/>
          </el-form-item>
          <el-form-item label="单位" prop="company">
            <el-select v-model="measurement" disabled filterable placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.company"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="重量(克)" prop="weight">
            <el-input v-model="form.weight" placeholder="请输入重量(克)" disabled @keyup="priceFormat"
                      oninput="value=value.replace(/[^\d]/g,'')" maxlength="10"/>
          </el-form-item>
          <el-form-item label="商品排序" prop="sort">
            <el-input v-model="form.sort" maxlength="8" disabled oninput="value=value.replace(/[^\d]/g,'')"
                      placeholder="请输入商品排序"/>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="关联属性">
          <el-form-item label="品牌" prop="brandId">
            <el-select
              disabled
              v-model="form.brandId"
              placeholder="品牌"
              clearable
              size="small"
              style="width: 100%"
            >
              <el-option
                v-for="dict in brandList"
                :key="dict.id"
                :label="dict.name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分类" prop="categoryId">
            <treeselect v-model="form.categoryId" disabled :options="categoryOptions" :normalizer="normalizer"
                        style="width: 100%;" placeholder="选择分类"/>
          </el-form-item>
          <el-form-item label="标签" prop="labelsIds">
            <el-select v-model="labelsIds" disabled multiple filterable placeholder="请选择" style="width: 100%;">
              <el-option
                v-for="item in labelOptions"
                :key="item.id"
                :label="item.name"
                :value="item.labelKey"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="库存" prop="inventory">
            <el-input v-model="form.inventory" disabled placeholder="请输入库存" maxlength="8"
                      oninput="value=value.replace(/[^\d]/g,'')"/>
          </el-form-item>
          <el-form-item label="库存阈值" prop="inventoryThreshold">
            <el-input v-model="form.inventoryThreshold" disabled placeholder="请输入库存阈值" maxlength="11"
                      oninput="value=value.replace(/[^\d]/g,'')"/>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right; margin-bottom: 50px; margin-top: 20px;">
      <el-button type="primary" @click="submitForm">返 回</el-button>
    </div>
  </div>

</template>

<script>
import {listBrand} from "@/api/erp/brand"
import {listCategory} from "@/api/erp/category";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listLabel} from "@/api/erp/label";
import { getGoods} from "@/api/erp/goods";
import {listCompany} from "@/api/erp/company";

let stream = require('stream')

export default {
  name: "Goods",
  components: {Treeselect},
  data() {
    return {
      //单位
      measurement:null,
      //单位list
      companyList:[],
      //图片list
      imgList: [],
      //品牌list
      brandList: [],
      //缩略图list
      thumbnailList: [],
      //分类list
      categoryOptions: [],
      //标签集合
      labelOptions: [],
      //标签集合
      labelsIds: [],
      //表单参数
      form: {},
      //表单校验
    };
  },
  created() {
    const goodId = this.$route.query.id
    if (goodId) {
      getGoods(goodId).then(response => {
        this.form = response.data;
        this.imgList = JSON.parse(this.form.banners);
        this.measurement = response.data.company
        this.limit = 6 - this.imgList.length;
        if (this.form.thumbnail) {
          this.thumbnailList.push(this.form.thumbnail);
        }
        this.labelsIds = JSON.parse(response.data.labels);
      });
    }
    this.getBrandList();
    this.getCategoryList();
    this.getLabelList();
    this.getCompanyList();
  },

  methods: {

    //获取单位列表
    getCompanyList(){
      let params = {};
      listCompany(params).then(response =>{
        this.companyList = response.rows;
      })
    },

    //获取标签列表
    getLabelList() {
      let params = {};
      listLabel(params).then(response => {
        this.labelOptions = response.rows;
      });
    },

    //获取分类列表
    getCategoryList() {
      let params = {};
      listCategory(params).then(response => {
        this.categoryOptions = this.handleTree(response.data, "id", "parentId");
      });
    },

    //获取品牌列表
    getBrandList() {
      let params = {};
      listBrand(params).then(response => {
        this.brandList = response.rows;
      });
    },

    //node分类节点
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },

    //返回上一页商品列表页
    submitForm() {
      this.$router.push({path: '/goodsList'});
    }

  }
}

</script>


<style scoped>

.upload_warp_img_div_del {
  position: absolute;
  top: 6px;
  width: 16px;
  right: 4px;
}

.upload_warp_img_div_top {
  position: absolute;
  top: 0;
  width: 25px;
  left: 295px;
  height: 30px;
  background-color: rgba(0, 0, 0, 0.4);
  line-height: 30px;
  text-align: left;
  color: #fff;
  font-size: 12px;
  text-indent: 4px;
}

.upload_warp_img_div img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.upload_warp_img_div {
  position: relative;
  height: 200px;
  width: 320px;
  border: 1px solid #ccc;
  margin: 0px 30px 10px 0px;
  float: left;
  line-height: 100px;
  display: table-cell;
  text-align: center;
  background-color: #eee;
  cursor: pointer;
}

.upload_warp_img {
  border-top: 1px solid #D2D2D2;
  padding: 14px 0 0 14px;
  overflow: hidden
}

.upload_warp_right {
  float: left;
  width: 57%;
  margin-left: 2%;
  height: 100%;
  border: 1px dashed #999;
  border-radius: 4px;
  line-height: 130px;
  color: #999;
}

.upload_warp_left img {
  margin-top: 32px;
}

.upload_warp_left {
  float: left;
  width: 40%;
  height: 100%;
  border: 1px dashed #999;
  border-radius: 4px;
  cursor: pointer;
}

.upload_warp {
  margin: 14px;
  height: 130px;
}

.upload {
  border: 1px solid #ccc;
  background-color: #fff;
  width: 60%;
  box-shadow: 0px 1px 0px #ccc;
  border-radius: 4px;
  text-align: center;
}



</style>
